Canvas vs WebGL2
选择运行时
对于 Web，首先选择以下两个包之一：
它们共享相同的高级 API，因此切换包不需要更改创建 new Rive({...}) 实例的方式。关键区别在于渲染器和包大小；阅读以下部分决定最适合你的用例，并比较运行时大小上的包大小。
@rive-app/webgl2（推荐）
在大多数情况下，如果你想要最佳渲染质量和性能，请使用 @rive-app/webgl2。
npm install @rive-app/webgl2
- 使用 Rive 渲染器 获得最佳渲染性能
- 支持 仅 Rive 渲染器专属的功能（例如矢量羽化）
WebGL 对并发上下文有限制，这可能限制你可以同时运行多少个
new Rive({...})实例。如果你在同一页面上显示许多图形，请为每个 Rive 对象设置useOffscreenRenderer: true。这将渲染工作转移到一个共享的离屏 WebGL 上下文，而不是在可见 canvas 上创建相同数量的单独上下文，从而有助于避免上下文限制问题，并在许多 Rive 实例处于活动状态时提高稳定性。
在 Chrome 中启用草稿 WEBGL_shader_pixel_local_storage 扩展可以提高渲染性能。没有它，Rive 会回退到基于 MSAA 的 WebGL2 路径。我们正在积极与浏览器厂商合作，使其默认启用。
@rive-app/canvas
当你的图形较简单且想要更小的运行时包时，使用 @rive-app/canvas。
npm install @rive-app/canvas
- 使用浏览器内置的 CanvasRenderingContext2D 渲染器
- 比 WebGL2 渲 染器选项更小的包大小
- 适用于较简单的矢量/位图图形
运行时选择后的更多选项
对于基于 Canvas 的运行时选项，你可以根据打包需求使用以下变体。
@rive-app/canvas-lite 变体
我们的 Canvas 版本运行时支持 -lite 变体以获得更小的包大小。
- 示例：
@rive-app/canvas-lite - 当你需要最小的运行时占用空间时使用此包
- 此包变体移除了某些功能（例如文本、布局、音频和脚本引擎）
@rive-app/canvas-single 变体
我们的 Canvas 版本运行时支持 -single 变体，它将 rive.wasm 直接打包到 JavaScript 文件中。
- 示例：
@rive-app/canvas-single - 如果你希望避免单独的 WASM 网络请求，请使用此包
- 与标准包相比，预计 JS 包体积更大
已弃用的包
@rive-app/webgl 已弃用，在 v2.37.0 之后将不再接收更新。请优先使用 @rive-app/webgl2。